<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #333;
            color: #fff;
            padding: 20px;
        }

        .tree-item {
            display: flex;
            align-items: center;
            padding: 10px;
            background-color: #444;
            border-radius: 4px;
            margin-bottom: 10px;
        }

        .tree-item span {
            font-size: 16px;
            margin-right: 10px;
        }

        .tree-item button {
            margin-left: auto;
            padding: 5px 10px;
            border: none;
            border-radius: 4px;
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .tree-item button:hover {
            background-color: #45a049;
        }

        .path-row {
            display: flex;
            align-items: center;
            padding: 10px;
            background-color: #444;
            border-radius: 4px;
            margin-bottom: 10px;
            gap: 8px;
            flex-wrap: nowrap;
            /* 禁止换行 */
            overflow-x: auto;
            /* 允许横向滚动 */
        }

        .path-row label {
            margin-right: 0;
            width: 50px;
            flex-shrink: 0;
        }

        /* 类型选择器 */
        .path-row select.valType {
            width: 80px;
            padding: 6px 8px;
            border: 1px solid #666;
            border-radius: 4px;
            background-color: #555;
            color: #fff;
            cursor: pointer;
            transition: all 0.3s;
        }

        /* 值输入区域 */
        .path-row .val {
            display: flex;
            align-items: center;
            width: 180px;
        }

        /* 布尔值容器 */
        .val-checkbox-container {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
        }

        /* 启用复选框 */
        .path-row .enable-container {
            display: flex;
            align-items: center;
            margin-left: 15px;
            gap: 8px;
            width: 80px;
        }

        .path-row .enable-label {
            width: 30px;
        }

        /* 删除按钮 */
        .path-row button.delete {
            padding: 6px 12px;
            border: none;
            border-radius: 4px;
            background-color: #f44336;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-left: auto;
            flex-shrink: 0;
        }

        /* 焦点状态 */
        .path-row input:focus,
        .path-row select:focus {
            border-color: #4CAF50;
            outline: none;
            box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
        }

        /* 复选框样式 */
        .path-row input[type="checkbox"] {
            width: 16px;
            height: 16px;
            accent-color: #4CAF50;
            cursor: pointer;
        }

        /* 悬停效果 */
        .path-row button.delete:hover {
            background-color: #d32f2f;
        }

        /* 类型选择器 */
        .path-row select.Key {
            width: 80px;
            padding: 6px 8px;
            border: 1px solid #666;
            border-radius: 4px;
            background-color: #555;
            color: #fff;
            cursor: pointer;
            transition: all 0.3s;
        }

        /* 名称输入框 - 全新优化样式 */
        .path-row .val-input,
        .path-row input[type="text"]:not(.remark-input) {
            width: 180px;
            flex-shrink: 0;
            padding: 8px 12px;
            border: 1px solid #666;
            /* 加深边框颜色 */
            border-radius: 6px;
            background-color: #464646;
            color: #fff;
            font-size: 14px;
            transition: all 0.3s ease;
            box-shadow:
                inset 0 1px 2px rgba(0, 0, 0, 0.2),
                0 1px 0 rgba(255, 255, 255, 0.03);
            outline: none;
        }

        /* 悬停状态 */
        .path-row .val-input:hover,
        .path-row input[type="text"]:hover {
            border-color: #777;
            /* 悬停时边框更亮 */
            background-color: #4e4e4e;
            box-shadow:
                inset 0 1px 2px rgba(0, 0, 0, 0.25),
                0 1px 0 rgba(255, 255, 255, 0.05);
        }

        /* 聚焦状态 */
        .path-row .val-input:focus,
        .path-row input[type="text"]:focus {
            border-color: #4CAF50;
            background-color: #4e4e4e;
            box-shadow:
                0 0 0 2px rgba(76, 175, 80, 0.3),
                inset 0 1px 2px rgba(0, 0, 0, 0.25);
            animation: input-focus 0.3s ease;
        }

        /* 占位符样式 */
        .path-row .val-input::placeholder,
        .path-row input[type="text"]::placeholder {
            color: #888;
            font-style: italic;
            opacity: 0.8;
        }

        /* 禁用状态 */
        .path-row .val-input:disabled,
        .path-row input[type="text"]:disabled {
            background-color: #3a3a3a;
            color: #777;
            border-color: #444;
            cursor: not-allowed;
        }

        /* 在现有的.path-row样式下添加 */
        .path-row .remark-input {
            width: 364px;
            min-width: 324px;
            flex-shrink: 0;
            padding: 8px 12px;
            border: 1px solid #666;
            border-radius: 6px;
            background-color: #464646;
            color: #fff;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .path-row .remark-input::placeholder {
            color: #888;
            font-style: italic;
            opacity: 0.8;
        }

        /* 移动按钮容器 */
        .path-row .move-buttons {
            display: flex;
            flex-direction: column;
            margin-right: 10px;
            gap: 4px;
        }

        /* 移动按钮样式 */
        .path-row button.move {
            width: 24px;
            height: 24px;
            padding: 0;
            border: none;
            border-radius: 2px;
            background-color: #555;
            color: #ccc;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .path-row button.move:hover {
            background-color: #666;
        }

        .path-row button.move:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

        /* 微妙的聚焦动画 */
        @keyframes input-focus {
            0% {
                box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
            }

            100% {
                box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3);
            }
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <!-- HTML内容保持不变 -->
    <div class="tree-item">
        <span>项目自定义配置</span>
        <button onclick="addNewItem()">+</button>
    </div>
    <div id="ProjectConfig"></div>

    <script>
        // JavaScript代码保持不变
        const vscode = acquireVsCodeApi();

        function addNewItem() {
            vscode.postMessage({ command: 'addNewItem' });
        }
        function moveItemUp(button) {
            const row = $(button).closest('.path-row');
            const prevRow = row.prev('.path-row');
            if (prevRow.length) {
                row.insertBefore(prevRow);
                updatePaths();
            }
        }

        function moveItemDown(button) {
            const row = $(button).closest('.path-row');
            const nextRow = row.next('.path-row');
            if (nextRow.length) {
                row.insertAfter(nextRow);
                updatePaths();
            }
        }

        // 初始化时禁用第一个的上移按钮和最后一个的下移按钮
        function updateMoveButtons() {
            $('.path-row').each(function (index) {
                const moveButtons = $(this).find('.move-buttons');
                moveButtons.find('button:first').prop('disabled', index === 0);
                moveButtons.find('button:last').prop('disabled', index === $('.path-row').length - 1);
            });
        }

        function updatePaths() {
            const paths = [];
            $('.path-row').each(function () {
                const key = $(this).find('input[type="text"]:first').val();
                const type = $(this).find('.valType').val();
                const remark = $(this).find('.remark-input').val(); // 获取备注值

                let val;
                if (type === 'bool') {
                    val = $(this).find('.val-checkbox').is(':checked');
                } else if (type === 'number') {
                    const inputVal = $(this).find('.val-input').val();
                    val = inputVal.includes('.') ? parseFloat(inputVal) : parseInt(inputVal);
                    if (isNaN(val)) val = 0;
                } else {
                    val = $(this).find('.val-input').val();
                }

                const enable = $(this).find('.enable').is(':checked');
                paths.push({
                    key: key,
                    type: type,
                    val: val,
                    enable: enable,
                    remark: remark // 添加备注字段
                });
            });
            const jsonPaths = JSON.stringify(paths);
            vscode.postMessage({ command: 'Update', data: jsonPaths });
            updateMoveButtons();
        }

        function updateInputType(selectElement) {
            const row = $(selectElement).closest('.path-row');
            const valueContainer = row.find('.val');
            const type = selectElement.value;
            const currentVal = valueContainer.find('input').val() || row.data('initial-val');

            if (type === 'bool') {
                const isChecked = currentVal === 'true' || currentVal === true;
                valueContainer.html(`
                    <div class="val-checkbox-container">
                        <input type="checkbox" class="val-checkbox" ${isChecked ? 'checked' : ''}>
                        <span>${isChecked ? '是' : '否'}</span>
                    </div>
                `);
                valueContainer.find('.val-checkbox').on('change', function () {
                    $(this).next('span').text($(this).is(':checked') ? '是' : '否');
                    updatePaths();
                });
            } else if (type === 'number') {
                valueContainer.html(`
                    <input type="number" 
                           class="val-input" 
                           value="${currentVal || '0'}"
                           step="any"> <!-- 允许输入小数 -->
                `);
            } else {
                valueContainer.html(`
                    <input type="text" class="val-input" value="${currentVal || ''}">
                `);
            }

            valueContainer.find('input').not('.val-checkbox').on('input', updatePaths);
        }

        function deletePathRow(row) {
            $(row).remove();
            updatePaths();
        }

        window.addEventListener('message', event => {
            if (event.data.type === 'addNewItem') {
                const initialData = event.data.data || {};
                const newRow = `
                <div class="path-row" data-initial-val="${initialData.val || ''}">
                    <div class="move-buttons">
                        <button class="move" onclick="moveItemUp(this)">↑</button>
                        <button class="move" onclick="moveItemDown(this)">↓</button>
                    </div>
                    <label>配置:</label>
                    <div class="Key">
                        <input type="text" placeholder="名称" value="${initialData.key || ''}">
                    </div>
                    <select class="valType" onchange="updateInputType(this)">
                        <option value="string" ${initialData.type === 'string' ? 'selected' : ''}>string</option>
                        <option value="number" ${initialData.type === 'number' ? 'selected' : ''}>number</option>
                        <option value="bool" ${initialData.type === 'bool' ? 'selected' : ''}>bool</option>
                    </select>
                    <div class="val" style="margin-right: 10px">
                        ${getInitialValueInput(initialData.type, initialData.val)}
                    </div>
                    <div class="enable-container">
                        <span class="enable-label">启用:</span>
                        <input type="checkbox" class="enable" ${initialData.enable !== false ? 'checked' : ''}>
                    </div>
                    <input type="text" class="remark-input" placeholder="备注" value="${initialData.remark || ''}">
                    <button class="delete" onclick="deletePathRow(this.parentNode)">删除</button>
                </div>`;
                $('#ProjectConfig').append(newRow);
                $('#ProjectConfig').on('input change', 'input, select', updatePaths);
                updatePaths();
            }
        });

        function getInitialValueInput(type, value) {
            switch (type) {
                case 'bool':
                    const isChecked = value === 'true' || value === true;
                    return `
                    <div class="val-checkbox-container">
                        <input type="checkbox" class="val-checkbox" ${isChecked ? 'checked' : ''}>
                        <span>${isChecked ? '是' : '否'}</span>
                    </div>`;
                case 'number':
                    return `<input type="number" class="val-input" value="${value || '0'}" step="any">`;
                default:
                    return `<input type="text" class="val-input" value="${value || ''}">`;
            }
        }
    </script>
</body>

</html>